<template>
	<el-dialog
			:visible="isVisible"
			:title="title"
			:width="width"
			:close-on-click-modal="closeOnClickModal"
			:close-on-press-escape="closeOnPressEscape"
			:show-close="showClose"
	>
		<template #default>
			<component v-if="contentComponent" :is="contentComponent" ref="contentRef" v-bind="contentProps"></component>
			<div v-else v-html="content"/>
		</template>
		<template #footer>
			<template v-if="type!=='info'">
				<el-button :type="cancelType" @click="handleCancel">{{ cancelText }}</el-button>
				<el-button :type="okType" @click="handleOk" :loading="confirmLoading">{{ okText }}</el-button>
			</template>
			<template v-else>
				<el-button :type="okType" @click="handleOk" :loading="confirmLoading">{{ okText }}</el-button>
			</template>
		</template>
	</el-dialog>
</template>
<script>
export default {
	name: 'GlobalDialog',
	props: {
		type: {
			type: String,
			default: 'info',
			validator(value) {
				return ['form', 'confirm', 'info'].includes(value)
			}
		},
		isVisible: {
			type: Boolean,
			default: false
		},
		confirmLoading: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '提示'
		},
		width: {
			type: String,
			default: '50%'
		},
		closeOnClickModal: {
			type: Boolean,
			default: true
		},
		closeOnPressEscape: {
			type: Boolean,
			default: true
		},
		showClose: {
			type: Boolean,
			default: true
		},
		okText: {
			type: String,
			default: '确定'
		},
		okType: {
			type: String,
			default: 'primary',
			validator(value) {
				return ['primary', 'success', 'warning', 'danger', 'info', 'text'].includes(value)
			}
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		cancelType: {
			type: String,
			default: 'text',
			validator(value) {
				return ['primary', 'success', 'warning', 'danger', 'info', 'text'].includes(value)
			}
		},
		contentComponent: {
			type: [Object, null],
			default: null
		},
		contentProps: {
			type: Object,
			default: () => {}
		},
		content: {
			type: [String, Object],
			default: ''
		}
	},
	methods: {
		async handleOk() {
			try {
				this.$emit('loadingOpen')
				if (this.type === 'form') {
					const data = await this.$refs.contentRef.handleOk()
					this.$emit('ok', data)
				} else {
					this.$emit('ok')
				}
			} catch (error) {
				console.log(error)
				this.$emit('loadingClose')
			}
		},
		handleCancel() {
			this.$emit('cancel')
		}
	}
}
</script>

<style scoped>

</style>